<template>
	<view class="content">
		<view class="Box">
			<view class="userBox">
				<view class="User">
					<view class="User_head_box">
						<image :src="$imgUrls(info.v_headimg)" mode="aspectFill" class="head_img"></image>
						<view class="row j-centert">
							<view class="User_Lv" v-if="info.vip_name">{{ info.vip_name }}</view>
						</view>
					</view>
					<view class="Userinfo">
						<text class="Username">{{ info.v_nickname }}</text>
						<text class="Usertel">{{ info.v_tel }}</text>
						<text class="Userdate">{{ info.v_addtime }}</text>
					</view>
				</view>

				<Scan></Scan>
			</view>

			<view class="Money">
				<view class="Money_list" @click="toUrl(`Balance?Type=money&vid=${info.v_id}`)">
					<text class="MoneyNum">{{ info.v_money }}</text>
					<view class="d-flex a-center black">
						<text class="h6">余额(元)</text>
						<view class="iconfont icon-xiangyoujiantou size22 m-left10 m-top4"></view>
					</view>
				</view>
				<view class="Money_list" @click="toUrl(`Balance?Type=jifen&vid=${info.v_id}`)">
					<text class="MoneyNum">{{ info.v_jifen_yue }}</text>
					<view class="d-flex a-center black">
						<text class="h6">积分(分)</text>
						<view class="iconfont icon-xiangyoujiantou size22 m-left10 m-top4"></view>
					</view>
				</view>
				<view class="Money_list" @click="toUrl(`coupon?Type=coupon&vid=${info.v_id}`)">
					<text class="MoneyNum">{{ info.coupon_count }}</text>
					<view class="d-flex a-center black">
						<text class="h6">优惠券(张)</text>
						<view class="iconfont icon-xiangyoujiantou size22 m-left10 m-top4"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="black size30 padding30-20">今日消费记录</view>

		<view class="list" v-for="(item, index) in pageData" :key="item.con_id">
			<view class="list_content">
				<text class="list_title">{{ item.title }}</text>
				<text class="list_time">{{ item.addDate }}</text>
			</view>
			<view class="list_money" :class="{ addMoney: item.con_type == '6' || item.con_type == '8' }">
				{{ item.con_type | Unit }}
				{{ item.con_money > item.con_jifen ? `￥${item.con_money}` : `${item.con_jifen}` }}
			</view>
		</view>

		<u-empty mode="list" text="暂无记录" :marginTop="80" v-if="!pageData.length"></u-empty>

		<dynamicMoney v-if="show" @Cancel="show = false" @confirm="confirm" :info="info" :initMoney="money">
		</dynamicMoney>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Scan from '@/Money/components/Scan.vue'
	import dynamicMoney from '@/Money/components/dynamicMoney'
	export default {
		components: {
			Scan,
			dynamicMoney,
		},
		data() {
			return {
				id: '',

				info: '',
				pageData: [],
				test: 1,
				money: '',
				Disabled: false,
				show: false,
				quota: false,
				type: 0,
			}
		},
		onLoad(opt) {
			if (opt.id) this.id = opt.id

		},
		onShow() {
			this.getCharge()
		},
		methods: {
			...mapMutations(['getVid']),
			getCharge() {
				let responData = {
					shop_id: uni.getStorageSync('store_id'),
				}

				if (this.vid) {
					responData['v_id'] = this.vid
				} else if (this.id) {
					responData['id'] = this.id
				}
				this.$http
					.get({
						url: '/singleSaleManageApi/getCharge',
						data: responData,
					})
					.then((res) => {
						if (res.code != '200') return this.$Toast(res.msg)
						const result = res.data
						this.info = result
						this.pageData = result.consumptionList || []
						if (this.vid) return
						this.StoreVid()
						if (result.money > 0) {
							this.money = result.money
							this.Disabled = true
						}
						this.show = true
						if (result.money == 0) {
							this.quota = true
							this.Disabled = true
						}
					})
			},
			confirm(event) {
				this.money = event
				this.takeOut()
			},
			takeOut() {
				if (!this.money) return
				// console.log(this.money)
				// return
				this.$http
					.post({
						url: '/singleSaleManageApi/costMoney',
						data: {
							code: this.id,
							money: this.money,
							shop_id: uni.getStorageSync('store_id'),
						},
					})
					.then((res) => {
						if (res.code != '200') {
							this.show = false
							this.$Toast(res.msg)
							return
						}
						this.show = false
						this.id = ''
						this.toUrl(`paySuccess?type=${this.info.type}`)
					})
			},
			StoreVid() {
				if (this.info.v_id) this.getVid(this.info.v_id)

			},
		},
		computed: {
			...mapState(['vid'])
		},

		filters: {
			Unit(Val) {
				if (Val == 6 || Val == 8) return '+'
				if (Val == 7 || Val == 9) return '-'
			},
		},
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 710rpx;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.Box {
		width: 100%;
		padding: 30rpx 0;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.userBox {
		width: 100%;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.User {
		display: flex;
		align-items: center;
	}

	.User_head_box {
		width: 142rpx;
		position: relative;
		text-align: center;
	}

	.head_img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
	}

	.User_Lv {
		padding: 2rpx 10rpx;
		display: inline-block;
		background-color: #169bd5;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 20rpx;
		margin-top: -24rpx;
		position: relative;
		z-index: 10;
	}

	.Userinfo {
		display: flex;
		flex-direction: column;
	}

	.Username {
		font-size: 34rpx;
		color: #000;
	}

	.Usertel,
	.Userdate {
		color: #333;
		font-size: 26rpx;
		margin-top: 4rpx;
	}

	.Money {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		margin-top: 36rpx;
	}

	.Money_list {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.Money_list::before {
		content: '';
		width: 1rpx;
		height: 50rpx;
		background-color: #ebebeb;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
	}

	.Money_list:last-child::before {
		display: none;
	}

	.MoneyNum {
		color: #000;
		font-size: 36rpx;
	}

	.list {
		width: 100%;
		padding: 20rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.list_content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.list_title {
		color: #000;
		font-size: 28rpx;
	}

	.list_time {
		color: #333;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.list_money {
		color: #ff0000;
		font-size: 36rpx;
	}

	.addMoney {
		color: #006600;
	}
</style>